<template>
    <el-breadcrumb class="breadcrumb">
        <template v-for="(item, index) in breads" :key="index">
            <el-breadcrumb-item v-if="breads.length-1>index" :to="{ path: item.path }">
                {{ item.title }}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-else>
                {{ item.title }}
            </el-breadcrumb-item>
        </template>
    </el-breadcrumb>
</template>

<script setup>
let router = useRouter();
let route = useRoute();
const breads = ref()
watch(() => route.matched, (newVal, oldVal) => {
    breads.value = [{ title: '首页', path: '/' }]
    const path = route.path.split('/').filter(it => it)
    const routers = router.getRoutes()

    path.forEach((item, index, items) => {
        for (let j = 0; j < routers.length; j++) {
            const itemPath = '/' + items.slice(0, index + 1).join('/')
            if (itemPath === routers[j].path) {
                breads.value.push({ title: routers[j].meta.title, path: routers[j].path })
                break
            }
        }
    })

    breads.value[breads.value.length - 1].path = null
},
    { immediate: true }
)
</script>

<style scoped lang='scss'>
.breadcrumb {
    font-size: 16px;
    padding: 16px 0;
    line-height: 24px;
}
</style>